<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>我的个人简历</title>
    <style>
        header{
            height: 200px;
            background-color: #d9ebb1;
            border-radius: 25px;
        }
        #myHead{
            margin-top: 25px;
            width:150px;
            height: 150px;
            border-radius: 50%;
            margin-left: 30px;
        }
        #name{
            font-size: 55px;
            font-family:黑体 ;
            position: absolute;
            margin-top: -130px;
            margin-left: 220px;
        }
        #ename{
            font-size: 25px;
            font-family: 宋;
            position: absolute;
            margin-left: 220px;
            margin-top: -70px;
        }
        .icon{
            height: 35px;
            width: 35px;
        }
        .inf{
            position: relative;
            margin-top: -38px;
            margin-left: 40px;
        }
        .infs{
            height: 35px;
        }
        #head-right{
            float: right;
            margin-top: -170px;
        }
        #main{
            height: 500px;
            width: 1300px;
            margin-left: 200px;
            background: url("../img/background.png") no-repeat  0px;
            background-size: cover;
        }
        #nav{
            position: fixed;
            margin-left: 20px;
            margin-top: 10px;
            background-color: #fffbb1;
        }
        .navs{
            font-size: 30px;
            height: 60px;
            width: 160px;
            border: solid 1px;
            text-align: center;
            padding-top: 20px;
            color: #3e2d7d;
        }
        #nav1{
            background-color: #f2aeb9;
        }
        .bullet{
            position: absolute;
            left: 1000px;
        }
        .C{
            text-align: center;
            font-size: 45px;
            background-color:#f2aeb9;
        }
        .E{
            text-align: center;
            font-size: 20px;
            background-color:#f2aeb9;
        }
        #BasicInformation{
            margin-left: 200px;
            height: 300px;
            width: 1300px;
        }

        #table{
            border: #d6a7c9 solid 2px;
        }
        .td{
            width: 200px;
            height: 50px;
            font-size: 20px;
            text-align: center;
            border: #d9ebb1 solid 2px;
        }
        #Education{
            margin-left: 200px;
            height: 400px;
            width: 1300px;
        }
        #edu{
            margin-left: 270px;
        }
        #skill{
            margin-left: 200px;
            height: 500px;
            width: 1300px;
        }
        .skills{
            height: 100px;
            margin-left: 50px;
            font-size: 30px;
        }
        .simg{
            position: relative;
            margin-left: 180px;
        }
        .sname{
            position: relative;
            margin-left: 180px;
            margin-top: -50px;
        }
        #self{
            margin-left: 200px;
            height: 400px;
            width: 1300px;
        }
        #tableS tr td{
            text-align: center;
            height: 60px;
            width: 150px;
            border: #ab93a9 solid 2px;
        }
        #tableS{
            margin-left: 250px;
            margin-top: 150px;
        }

        .black{
            background-color: #95d0de;
        }
        #ldd{
            height: 210px;
        }
        #pos{
            font-size: 25px;
            position: absolute;
            margin-top: -40px;
            margin-left: 220px;
        }
    </style>
</head>
<body>
    <header>
        <div>
            <div><img src="../img/myHead.JPG" id="myHead"></div>
            <div id="name">雷登鼎</div>
            <div id="ename">Lei Dengding</div>
            <div id="pos">求职意向：web前端工程师</div>
        </div>
        <div id="head-right">
            <div class="infs">
                <img src="../img/home.png" class="icon">
                <div class="inf">四川成都</div>
            </div>
            <div class="infs">
                <img src="../img/phone.png" class="icon">
                <div class="inf">17844649133</div>
            </div>
            <div class="infs">
                <img src="../img/email.png" class="icon">
                <div class="inf">2268663495@qq.com</div>
            </div>
            <div class="infs">
                <img src="../img/qq.png" class="icon">
                <div class="inf">2268663495</div>
            </div>
            <div class="infs">
                <img src="../img/vx.png" class="icon">
                <div class="inf">Lddingbaba</div>
            </div>
        </div>
    </header>
    <div id="nav">
        <div class="navs" id="nav1">欢迎</div>
        <div class="navs" id="nav2">基本信息</div>
        <div class="navs" id="nav3">教育经历</div>
        <div class="navs" id="nav4">职业技能</div>
        <div class="navs" id="nav5">自我评价</div>
    </div>
    <div>
       <div id="main">

       </div>
    </div>
    <div>
        <div id="BasicInformation">
            <div class="C">基本信息</div>
            <div class="E">/Basic information</div>
            <table id="table">
                <tr>
                    <td class="td">我的性别</td>
                    <td class="td">我的年龄</td>
                    <td class="td">我的学历</td>
                    <td class="td">我的专业</td>
                    <td class="td">我的籍贯</td>
                    <td class="td">我的生日</td>
                </tr>
                <tr>
                    <td class="td">男</td>
                    <td class="td">20</td>
                    <td class="td">本科</td>
                    <td class="td">计算机科学与技术</td>
                    <td class="td">四川省会理县</td>
                    <td class="td">2000-03-06</td>
                </tr>
            </table>
        </div>
    </div>
    <div>
      <div id="Education">
         <div class="C">教育经历</div>
         <div class="E">/Education experience</div>
          <img src="../img/edu.png" id="edu">
      </div>
    </div>
    <div>
     <div id="skill">
         <div class="C">职业技能</div>
         <div class="E">/Professional skill</div>
         <div class="skills">
             <img src="../img/90.png" class="simg">
             <div class="sname">HTML5</div>

         </div>
         <div class="skills">
             <img src="../img/75.png" class="simg">
             <div class="sname">JS</div>
         </div>
         <div class="skills">
             <img src="../img/60.png" class="simg">
             <div class="sname">JAVA</div>
         </div>
         <div class="skills">
             <img src="../img/60s.png" class="simg">
             <div class="sname">Vue</div>
         </div>
     </div>
    </div>
    <div id="self">
        <div class="C">自我评价</div>
        <div class="E">/Self assessment</div>
        <table id="tableS">
            <tr>
                <td>有上进心</td>
                <td class="black"></td>
                <td>学习能力强</td>
                <td class="black"></td>
                <td>动手能力强</td>
            </tr>
            <tr>
                <td class="black"></td>
                <td>有创造力</td>
                <td class="black"></td>
                <td>成熟</td>
                <td class="black"></td>
            </tr>
            <tr>
                <td>心态好</td>
                <td class="black"></td>
                <td>做事效率高</td>
                <td class="black"></td>
                <td>良好的沟通能力</td>
            </tr>
            <tr>
                <td class="black"></td>
                <td>团队协作能力强</td>
                <td class="black"></td>
                <td>头发多</td>
                <td class="black"></td>
            </tr>
        </table>
        <div id="ldd"></div>
    </div>
</body>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script>
    window.addEventListener("load",function(ev){
        let nav=document.getElementById("nav");
        let navLis=nav.children;

        for(let i=0;i<5;i++){
            let navLi=navLis[i];
            (function (index) {
                navLi.addEventListener("click",function (evt) {
                    for(let i=0;i<5;i++) {
                        let navs = navLis[i];
                        navs.style.backgroundColor = "#fffbb1";
                    }
                    navLi.style.backgroundColor="#f2aeb9";
                    switch (index) {
                        case 0:
                            move(0);
                            break;
                        case 1:
                            move(700);
                            break;
                        case 2:
                            move(1000);
                            break;
                        case 3:
                            move(1400);
                            break;
                        case 4:
                           move(1900);
                            break;
                    }
                })
            })(i)
        }

        let strings=new Array();
        strings[0]="我爱编程";
        strings[1]="JavaWeb";
        strings[2]="JavaScript";
        strings[3]="HTML5";
        strings[4]="ES6";
        strings[5]="React";
        strings[6]="VUE";
        strings[7]="Servlet";
        strings[8]="AJax";
        strings[9]="JQuery";
        strings[10]="json";

        setInterval(function () {
            let bullet = $("<div>");
            //生成一条弹幕
            bullet.text(strings[Math.round(Math.random()*9)]);
            //将输入框内容放置到div中
            bullet.addClass("bullet");
            //为bullet这个div添加样式bullet
            bullet.css({"top":Math.round(Math.random()*450)+200});
            //随机设置弹幕位置
            bullet.css({"left":"1350px"});
            bullet.css({"font-size":Math.round(Math.random()*60)+12+"px"});
            bullet.css({"color":"rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"});
//				alert(window.getComputedStyle(bullet,null).width);
            bullet.animate({
                left:"200px"//此处视为bug，应该随着弹幕的长短而变化
            },Math.round(Math.random()*9000)+1000,"linear", function(){
                bullet.remove();
                //当运动结束时，删除弹幕
            });
            $("#main").append(bullet);
        },200)

    });
    function move(lang) {
        let interval=setInterval(function (ev) {
            if(document.documentElement.scrollTop>lang) {
                document.documentElement.scrollTop -= 100;
                if(document.documentElement.scrollTop<=lang){
                    clearInterval(interval);
                }
            }
            if(document.documentElement.scrollTop<lang) {
                document.documentElement.scrollTop += 100;
                if(document.documentElement.scrollTop>=lang){
                    clearInterval(interval);
                }
            }
        },100);
    }

    window.addEventListener("scroll",function (ev) {
        let nav=document.getElementById("nav");
        let navLis=nav.children;
        let nav1=navLis[0];
        let nav2=navLis[1];
        let nav3=navLis[2];
        let nav4=navLis[3];
        let nav5=navLis[4];

        if(document.documentElement.scrollTop<600){
            nav1.style.backgroundColor="#f2aeb9";
            nav2.style.backgroundColor="#fffbb1";
            nav3.style.backgroundColor="#fffbb1";
            nav4.style.backgroundColor="#fffbb1";
            nav5.style.backgroundColor="#fffbb1";
        }
        if(document.documentElement.scrollTop>=600&&document.documentElement.scrollTop<900){
            nav2.style.backgroundColor="#f2aeb9";
            nav1.style.backgroundColor="#fffbb1";
            nav3.style.backgroundColor="#fffbb1";
            nav4.style.backgroundColor="#fffbb1";
            nav5.style.backgroundColor="#fffbb1";
        }
        if(document.documentElement.scrollTop>=900&&document.documentElement.scrollTop<1300){
            nav3.style.backgroundColor="#f2aeb9";
            nav1.style.backgroundColor="#fffbb1";
            nav2.style.backgroundColor="#fffbb1";
            nav4.style.backgroundColor="#fffbb1";
            nav5.style.backgroundColor="#fffbb1";
        }
        if(document.documentElement.scrollTop>=1300&&document.documentElement.scrollTop<1800){
            nav4.style.backgroundColor="#f2aeb9";
            nav1.style.backgroundColor="#fffbb1";
            nav2.style.backgroundColor="#fffbb1";
            nav3.style.backgroundColor="#fffbb1";
            nav5.style.backgroundColor="#fffbb1";
        }
        if(document.documentElement.scrollTop>=1800){
            nav5.style.backgroundColor="#f2aeb9";
            nav1.style.backgroundColor="#fffbb1";
            nav2.style.backgroundColor="#fffbb1";
            nav3.style.backgroundColor="#fffbb1";
            nav4.style.backgroundColor="#fffbb1";
        }
    })
</script>
</html>